<template>
  <div class="container" ref="imageWrapper">
     <div class="header1" style="padding: 10px; background-color: white; border: solid 1px #e2e2e2; margin-bottom: 15px">
      <div style="display: flex; justify-content: flex-start"></div>
      <div style="display: flex; justify-content: flex-end">
        <a-button class="hte-btn del-btn" @click="handleSave">保存</a-button>
      </div>
    </div>
    <div class="content">
      <section>
        <div class="section-header">任务详情</div>
        <a-form-model ref="ruleForm" :model="form" :rules="rules">
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-model-item label="任务名称:" prop="taskName">
                <a-input v-model="form.taskName" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="任务类型:" prop="taskType">
                <a-radio-group v-model="form.taskType" button-style="solid">
                  <a-radio-button v-for="(item, index) in taskTypeOpt" :key="'taskType_' + index" :value="item.code">{{
                    item.name
                  }}</a-radio-button>
                </a-radio-group>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="任务状态:" prop="taskEnv">
                <a-radio-group v-model="form.status" button-style="solid">
                  <a-radio-button
                    v-for="(item, index) in taskStatusOpt"
                    :key="'taskType_' + index"
                    :value="item.code"
                    >{{ item.name }}</a-radio-button
                  >
                </a-radio-group>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-model-item label="任务描述:" prop="taskDescr">
                <a-textarea v-model="form.taskDescr" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-model-item label="Class路径:" prop="classPath">
                <a-input v-model="form.classPath" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="运行环境:" prop="taskEnv">
                <a-radio-group v-model="form.taskEnv" button-style="solid">
                  <a-radio-button v-for="(item, index) in taskEnvOpt" :key="'taskType_' + index" :value="item.code">{{
                    item.name
                  }}</a-radio-button>
                </a-radio-group>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="8" v-if="form.taskType == '1'">
              <a-form-model-item label="执行周期:" prop="executePeroid">
                <a-input v-model="form.executePeroid" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8" v-if="form.taskType == '1'">
              <a-form-model-item label="周期单位:" prop="executeUnit">
                <a-radio-group v-model="form.executeUnit" button-style="solid">
                  <a-radio-button v-for="(item, index) in executeUnitOpt" :key="'taskType_' + index" :value="item.code"
                    >{{ item.name }}
                  </a-radio-button>
                </a-radio-group>
              </a-form-model-item>
            </a-col>
            <a-col :span="16" v-if="form.taskType == '2'">
              <a-form-model-item label="CORN表达式:" prop="cornExpress">
                <a-input v-model="form.cornExpress" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-model-item label="任务参数:">
                <a-textarea v-model="form.params" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </section>
    </div>
  </div>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
export default {
  components: {
    HomeNav: () => import('@/components/layouts/HomeNav'),
  },
  data() {
    return {
      userinfo: {
        info: this.$store.getters.userInfo,
        module: 'QuartzDetail',
      },
      urls: {
        info: '/hteQuartz/info',
        edit: '/hteQuartz/edit',
        codes: '/manage/codeInfo/queryByTypes',
      },
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      rules: {
        taskName: [{ required: true, message: '请输入', trigger: 'blur' }],
        taskDescr: [{ required: true, message: '请输入', trigger: 'blur' }],
        classPath: [{ required: true, message: '请输入', trigger: 'blur' }],
        cornExpress: [{ required: true, message: '请输入', trigger: 'blur' }],
        taskType: [{ required: true, message: '请输入', trigger: 'blur' }],
        taskEnv: [{ required: true, message: '请输入', trigger: 'blur' }],
        executePeroid: [{ required: true, message: '请输入', trigger: 'blur' }],
        executeUnit: [{ required: true, message: '请选择', trigger: 'blur' }],
      },
      taskTypeOpt: [
        { code: '1', name: '循环任务' },
        { code: '2', name: '定时任务' },
      ],
      taskEnvOpt: [
        { code: '全部', name: '全部环境' },
        { code: 'dev', name: '开发环境' },
        { code: 'test', name: '测试环境' },
        { code: 'prod', name: '正式环境' },
      ],
      executeUnitOpt: [
        { code: '1', name: '秒' },
        { code: '2', name: '分' },
        { code: '3', name: '时' },
      ],
      taskStatusOpt: [
        { code: '1', name: '开启' },
        { code: '2', name: '关闭' },
      ],
      form: { taskType: '1', executeUnit: '1', taskEnv: '全部', taskEnv: '全部' },
      codes: {},
    }
  },
  computed: {},
  async mounted() {
    await this.fetchCodes()
    this.init()
  },
  methods: {
    async init(id) {
      if (id) {
        this.$set(this.form, 'id', id)
        this.fetchQuartz()
      }
    },
    fetchQuartz(id) {
      if (!this.form.id) {
        return
      }
      getAction(this.urls.info + '?id=' + this.form.id).then((res) => {
        if (res.success) {
          this.form = res.result
        } else {
          this.$message.error('获取定时任务信息失败:' + res.message)
        }
      })
    },
    fetchCodes() {
      let types = []
      types.push('定时任务状态')
      types.push('定时任务类型')
      getAction(this.urls.codes, { types: types.join(',') }).then((res) => {
        if (res.success) {
          this.codes = { ...this.codes, ...res.result }
        }
      })
    },
    handleSave(action) {
      postAction(this.urls.edit, this.form).then((res) => {
        if (res.success) {
          this.form = res.result
          this.$message.success('保存成功')
          if (this.$route.path.startsWith('/quartz/add')) {
            this.$router.push('/quartz/edit?id=' + this.form.id)
          } else {
            this.init()
          }
        } else {
          this.$message.error('保存失败:' + res.message)
        }
      })
    },
  },
  watch: {},
}
</script>

<style lang="less" scoped>
@import '~@assets/less/hte-main.less';

.container {
  .content {
    margin-top: 20px;

    section {
      margin-bottom: 18px;

      .section-table {
        .add-btn {
          margin-left: 0;
          margin-bottom: 10px;
        }

        /deep/ .a-upload__input {
          display: none !important;
        }
      }
    }
  }
}

.tips-box {
  margin-top: 32px;

  .add-btn {
    width: 180px;
    height: 40px;
    line-height: 40px;
    background-color: #4095e4;
    border-radius: 2px;
  }
}

/deep/ .el-upload__input {
  display: none !important;
}

/deep/.ant-form .ant-form-item-label {
  width: 150px;
}
</style>
<style lang="less" scoped>
/deep/ .el-upload__input {
  display: none !important;
}

/deep/.ant-form .ant-form-item-label {
  width: 150px !important;
}

/deep/.ant-form .ant-form-item-control-wrapper {
  display: inline-block;
  width: calc(100% - 150px) !important;
}

/deep/ #process-container {
  width: unset !important;
}

#process-container {
  background: #fff;
  padding: 40px 22px;
  width: auto;
  margin: 0 auto;
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
}
</style>
